<template>
    <div id="app">
        <transition mode="out-in" name="fade">
            <router-view/>
        </transition>
    </div>
</template>
<style lang="scss">
    $primary-color: #3b6cbe;
    $primary-color-transparent: #3b6cbe4a;
    $plain-background-color: #fbf2cf;
    $plain-background-color-transparent: #fbf2cf4a;
    $plain-border-color: #bb9d1b;
    $plain-border-color-transparent: #bb9d1b4a;

    @font-face {
        font-family: wf;
        src: url("//at.alicdn.com/t/font_1449632746_779643.eot");
        src: url("//at.alicdn.com/t/font_1449632746_779643.eot?#iefix") format("embedded-opentype"),
        url("//at.alicdn.com/t/font_1449632746_779643.woff") format("woff"),
        url("//at.alicdn.com/t/font_1449632746_779643.ttf") format("truetype"),
        url("//at.alicdn.com/t/font_1449632746_779643.svg#iconfontold") format("svg")
    }

    .no-user-select {
        user-select: none;
    }

    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        overflow: hidden;
    }

    #app {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .el-menu {
        border-right: none;
    }

    .el-menu-item,
    .el-submenu__title {
        height: 46px !important;;
        line-height: 46px !important;
    }

    .el-menu-item.is-active {
        background-color: #f7f7f7 !important;
        color: #333 !important;
        border-left: 10px solid #3b6cbe !important;
    }

    .el-submenu [class^="fa"] {
        vertical-align: baseline;
        margin-right: 10px;
    }

    .el-menu-item [class^="fa"] {
        vertical-align: baseline;
        margin-right: 10px;
    }

    .toolbar {
        background: #f2f2f2;
        padding: 10px;
        margin: 10px 0;

        .el-form-item {
            margin-bottom: 10px;
        }
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 0.2s linear;
    }

    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }

    .login-bg .el-input__inner {
        height: 52px !important;
    }

    .el-button--primary {
        color: #fff;
        background-color: $primary-color !important;
        border-color: $primary-color !important;

        &.is-disabled {
            color: #797979;
            background-color: $primary-color-transparent !important;
            border-color: $primary-color-transparent !important;
        }

        &.is-plain {
            color: $plain-border-color;
            background-color: $plain-background-color !important;
            border-color: $plain-border-color !important;

            &.is-disabled {
                color: #d8bc45;
                background-color: $plain-background-color-transparent !important;
                border-color: $plain-border-color-transparent !important;
            }
        }
    }

    .contain-box {
        margin: 20px;
    }

    .view-body {
        background-color: #fff;
        padding: 20px;

        img {
            max-width: 100%;
        }
    }

    .table-header {
        background-color: #f7f7f7 !important;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: $primary-color !important;
    }

    .el-image-viewer__close {
        color: #FFFFFF;
    }

    .el-transfer-panel__item {
        margin-left: 0;
        display: block !important;
    }

    .router-icon {
        width: 24px;
        vertical-align: middle;
        margin-right: 20px;
    }

    .ql-container.ql-snow {
        min-height: 300px;
    }

    .user-selecter {
        width: 40%;
        min-width: 240px;
    }

    .date-time {
        margin: 0;
    }
</style>
